﻿<AntTitle Level="1">Affix</AntTitle>
<AntText>Wrap Affix around another component to make it stick the viewport.</AntText>
<AntTitle Level="2">When To Use</AntTitle>
<AntParagraph>
    On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
    Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
</AntParagraph>
<br />
<h2>Examples</h2>
<br />

<AntRow Style="margin-left: -8px; margin-right: -8px;">
    <style>
        .AntCol {
            padding-left: 8px;
            padding-right: 8px;
        }
    </style>
    <AntCol Span="12">
        <DemoCard>
            <Title>Basic</Title>
            <Description>The simplest usage.</Description>
            <Demo>
                <div>
                    <AntAffix OffsetTop="@_offsetTop">
                        <AntButton Type="@AntButtonType.Primary" OnClick="AddTop">
                            Affix top
                        </AntButton>
                    </AntAffix>
                    <br />
                    <AntAffix OffsetBottom="@_offsetBottom">
                        <AntButton Type="@AntButtonType.Primary" OnClick="AddBottom">
                            Affix bottom
                        </AntButton>
                    </AntAffix>
                </div>
            </Demo>
        </DemoCard>
        <DemoCard>
            <Title>Container to scroll.</Title>
            <Description>Set a <code>Target</code> for 'Affix', which listen to scroll event of target element (default is <code>window</code>).</Description>
            <Demo>
                <style>
                    .scrollable-container{
                        height: 100px;
                        overflow-y: scroll;
                    }
                    .background {
                        padding-top: 60px;
                        height: 300px;
                        background-image: url("https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg")
                    }
                </style>
                <div class="scrollable-container" @ref="_container">
                    <div class="background">
                        <AntAffix Target="@_container">
                            <AntButton Type="@AntButtonType.Primary">
                                Fixed at the top of container
                            </AntButton>
                        </AntAffix>
                    </div>

                </div>
            </Demo>
        </DemoCard>
    </AntCol>
    <AntCol Span="12">
        <DemoCard>
            <Title>Callback</Title>
            <Description>Callback with affixed state.</Description>
            <Demo>
                <AntAffix OffsetTop="120" OnChange="OnAffixChange">
                    <AntButton>
                        120px to affix top
                    </AntButton>
                </AntAffix>
            </Demo>
        </DemoCard>
    </AntCol>
</AntRow>

<section class="markdown api-container"><h2 id="API" data-scrollama-index="5"><span>API</span><a class="anchor" href="#API">#</a></h2><table><thead><tr><th>Property</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>offsetBottom</td><td>Offset from the bottom of the viewport (in pixels)</td><td>number</td><td>-</td></tr><tr><td>offsetTop</td><td>Offset from the top of the viewport (in pixels)</td><td>number</td><td>0</td></tr><tr><td>target</td><td>Specifies the scrollable area DOM node</td><td>() =&gt; HTMLElement</td><td>() =&gt; window</td></tr><tr><td>onChange</td><td>Callback for when Affix state is changed</td><td>Function(affixed)</td><td>-</td></tr></tbody></table><p><strong>Note:</strong> Children of <code>Affix</code> must not have the property <code>position: absolute</code>, but you can set <code>position: absolute</code> on <code>Affix</code> itself:</p><pre class="language-jsx"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Affix</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> position<span class="token punctuation">:</span> <span class="token string">'absolute'</span><span class="token punctuation">,</span> top<span class="token punctuation">:</span> y<span class="token punctuation">,</span> left<span class="token punctuation">:</span> x <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Affix</span><span class="token punctuation">&gt;</span></span></code></pre><h2 id="FAQ" data-scrollama-index="6"><span>FAQ</span><a class="anchor" href="#FAQ">#</a></h2><h3 id="Affix-bind-container-with-target,-sometime-move-out-of-container."><span>Affix bind container with <code>target</code>, sometime move out of container.</span><a class="anchor" href="#Affix-bind-container-with-target,-sometime-move-out-of-container">#</a></h3><p>We don't listen window scroll for performance consideration. You can add listener if you still want: <a href="https://codesandbox.io/s/2xyj5zr85p">https://codesandbox.io/s/2xyj5zr85p</a></p><p>Related issues：<a href="https://github.com/ant-design/ant-design/issues/3938">#3938</a> <a href="https://github.com/ant-design/ant-design/issues/5642">#5642</a> <a href="https://github.com/ant-design/ant-design/issues/16120">#16120</a></p></section>